import React, { Component } from 'react'
import {
    Text,
    TouchableOpacity
} from 'react-native';
import { Loginstyles as styles } from '../../styles'
const theTime = '';
//验证码计时按钮
export default class Timer2 extends Component {

    constructor(props){
        super(props)
        this.state = {
            isOk:true
        };
    }

    componentDidMount(){
    }

    componentDidUpdate(){
        if(this.state.t==0&&!this.state.isOk){
            this.setState({isOk:true})
        }
    }
 
    componentWillUnmount(){
        //卸载
        clearTimeout(theTime);
    }

    _onPress(){
        if(this.state.isOk&&this.props.ready){//内部状态和外部属性都可用后执行
            this.props.rollBack();
            this.setState({isOk:false,t:this.props.t})
            theTime = setInterval(() => {
                this.setState({t:this.state.t-1})
            }, 1000)
        }
    }

    render() {
        //if(this.state.isOk){
            return (
                <TouchableOpacity style={this.state.isOk&&this.props.ready?[styles.yzmStyle, {
                    elevation: 3,
                    shadowColor: 'black',
                    shadowOpacity: 1
                    }]:
                    [[styles.yzmStyle, {
                        elevation: 3,
                        shadowColor: 'black',
                        shadowOpacity: 1,
                        backgroundColor:'#aeaeae'
                        }]]}
                    activeOpacity={1} onPress={this._onPress.bind(this)}>
                    {this.state.isOk?
                        <Text style={{ padding: 6, color: '#FFFFFF', fontSize: 11,fontFamily:"msyh" }}>获取验证码</Text>
                        :
                        <Text style={{ padding: 6, color: '#FFFFFF', fontSize: 11,fontFamily:"msyh" }}>获取验证码({this.state.t})</Text>
                    }
                </TouchableOpacity>
            )
        // }else{
        //     return (
        //         <TouchableOpacity style={[styles.yzmStyle, {
        //             elevation: 3,
        //             shadowColor: 'black',
        //             shadowOpacity: 1,
        //             backgroundColor:'#eee'
        //             }]}
        //             activeOpacity={1} onPress={this._onPress.bind(this)}>
        //             <Text style={{ padding: 6, color: '#FFFFFF', fontSize: 11,fontFamily:"msyh" }}>获取验证码({this.state.t})</Text>
        //         </TouchableOpacity>
        //     )
        // }
    }
}
